<template>
  <!-- 这里可以根据需要动态渲染 Dialog 或 Drawer -->
  <component
    :is="isDrawer ? 'el-drawer' : 'el-dialog'"
    v-bind="dialogProps"
    :model-value="visible"
    @close="handleCancel"
  >
    <template #default>
      <!-- 如果有表单 schema 则渲染表单，否则渲染自定义内容 -->
      <PlusForm
        v-if="formSchema && formSchema.length > 0"
        ref="formRef"
        :model="formModel"
        :columns="formSchema"
        :rules="formRules"
        @submit="handleFormSubmit"
        @submit-error="handleSubmitError"
      />
      <!-- 自定义插槽内容 -->
      <slot v-else name="customContent" />
    </template>
    <!-- 底部按钮 -->
    <template #footer>
      <div style="text-align: right; margin-top: 20px">
        <ElButton @click="handleCancel">取消</ElButton>
        <ElButton
          type="primary"
          @click="handleConfirm"
          style="margin-left: 8px"
        >
          确认
        </ElButton>
      </div>
    </template>
  </component>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElButton, ElDrawer, ElDialog } from "element-plus";
import PlusForm, {
  type PlusColumn,
  type FieldValues
} from "plus-pro-components";

interface DialogDrawerOptions {
  title?: string;
  formModel?: FieldValues;
  formSchema?: PlusColumn[];
  formRules?: Record<string, any>;
  customContent?: () => ReturnType<typeof h>;
  isDrawer?: boolean; // 新增的选项，用来区分是否是 Drawer
  beforeSubmit?: (formModel: FieldValues) => boolean | Promise<boolean>;
  onSubmit?: (formModel: FieldValues) => void;
  onSubmitError?: (errors: any) => void;
  dialogProps?: Record<string, any>; // Drawer/Dialog 通用的属性
}

const visible = ref(false);
const formModel = ref<FieldValues>({});
const formRef = ref<InstanceType<typeof PlusForm> | null>(null);
let options: DialogDrawerOptions | null = null;
const isDrawer = ref(true); // 默认使用 Drawer

const openDialogDrawer = (opts: DialogDrawerOptions) => {
  options = opts;
  isDrawer.value = opts.isDrawer ?? true; // 根据 isDrawer 选项选择模式，默认为 Drawer
  formModel.value = opts.formModel || {};
  visible.value = true;
};

const handleCancel = () => {
  visible.value = false;
};

const handleConfirm = async () => {
  if (options?.beforeSubmit) {
    const proceed = await options.beforeSubmit(formModel.value);
    if (!proceed) return;
  }

  if (formRef.value) {
    const isValid = await new Promise<boolean>(resolve => {
      formRef.value?.handleSubmit(valid => resolve(valid));
    });

    if (isValid && options?.onSubmit) {
      options.onSubmit(formModel.value);
      formRef.value?.handleReset();
      visible.value = false;
    } else {
      console.error("表单验证失败");
    }
  } else if (options?.onSubmit) {
    options.onSubmit(formModel.value);
    visible.value = false;
  }
};

const handleFormSubmit = (formModel: FieldValues) => {
  if (options?.onSubmit) {
    options.onSubmit(formModel);
    visible.value = false;
  }
};

const handleSubmitError = (errors: any) => {
  if (options?.onSubmitError) {
    options.onSubmitError(errors);
  }
  console.error("表单提交错误", errors);
};
</script>
